<template>
    <card
        class="device-list-card"
        :key="index">
        <template v-slot:title>
            <div class="title-box">
                <div class="title">设备档案</div>
                <hr class="titlehr"/>
            </div>
        </template>
        <div
            :class="contentclass"
            :style="contentstyle">
            <div class="device-line-box">
                <div class="device-line-left">{{ '设备状态' }}</div>
                <div class="device-line-right">
                    <device-status :uuid="uuid || listData.uuid"/>
                </div>
            </div>
            <div
                class="device-line-box"
                v-for="(item, index) in listprops"
                :key="index">

                <div class="device-line-left">{{ item.label }}</div>
                <div
                    v-if="item.type == 'label-btn'"
                    class="device-line-right">
                    <template v-if="listData[item.id] && listData[item.id].length > 0">
                        <van-tag
                            class="device-line-tag"
                            v-for="(tag, index) in listData[item.id]"
                            :key="index"
                            type="primary">
                            {{ tag }}
                        </van-tag>
                    </template>
                </div>
                <div
                    v-else
                    class="device-line-right">{{item.formatter ? item.formatter(listData) : listData[item.id] || '--'}}</div>
            </div>
        </div>
    </card>
</template>
<script>
import deviceStatus from '@/components/deviceview/manage/deviceStatus.vue';
import card from '@/components/_common/card.vue';
import { reactive } from '@vue/reactivity';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup.js';
import { computed } from '@vue/runtime-core';
export default {
    props: {
        uuid: String,
        listData: Object,
        listSetProps: Array,
        contentheight: {
            type: String,
            default () {
                return '';
            }
        }
    },
    components: { deviceStatus, card },
    setup (props) {
        const contentstyle = computed(() => {
            if (props.contentheight !== '' || props.contentheight !== undefined) {
                return {
                    maxHeight: props.contentheight,
                    overflow: 'auto'
                };
            } else {
                return {};
            }
        });
        const { getAllMaintenanceTeamMembers } = useMaintenanceMembersSetup();
        const state = reactive({
            friendsObj: {},
            defaultlistprop: [{
                id: 'devalias',
                label: '设备别名'
            }, {
                id: 'manufacturingCode',
                label: '出厂编号'
            }, {
                id: 'customer_name',
                label: '所属客户'
            }, {
                id: 'maintainer',
                label: '维保负责人',
                formatter: (detail) => {
                    const value = detail.maintainer || '--';
                    const alias = state.friendsObj && state.friendsObj[value];
                    const allalias = value + (alias ? ` (${alias})` : ' ');
                    return allalias || value;
                }
            },
            // {
            //     id: 'uuid',
            //     label: '设备号'
            // },
            {
                id: 'model',
                label: '型号'
            }, {
                id: 'devicemanager',
                label: '客户负责人'
            }, {
                id: 'devicemanagerphone',
                label: '联系方式'
            }, {
                id: 'address',
                label: '地区',
                formatter: (detail) => {
                    return detail.address && detail.address.country ? detail.address.country + detail.address.province + detail.address.city : '--';
                }
            }, {
                id: 'label',
                label: '标签',
                type: 'label-btn'
            }, {
                id: 'remark',
                label: '备注'
            }]
        });
        const onActivated = async () => {
            const tmp = await getAllMaintenanceTeamMembers();
            tmp.value.forEach((item) => {
                state.friendsObj = reactive({ ...state.friendsObj, [item.account]: item.alias });
            });
        };
        const listprops = computed(() => {
            return props.listSetProps || state.defaultlistprop;
        });
        return {
            state,
            getAllMaintenanceTeamMembers,
            onActivated,
            listprops,
            contentstyle
        };
    }
};
</script>
<style lang="scss" scoped>
.device-list-card{
    box-shadow: none;

.title-box{
    .title{
        color: #000000;
        font-size: 17px;
        text-align: center;
        margin: 12px 0px 12px 0px;
    }
    .titlehr{
        width: 100%;
        height: 1px;
        height: 1px;
        background-color: #f5f5f5;
        border: none;
    }
}
.device-line-box {
    display: flex;
    font-size: 13px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    align-items: center;
    .device-line-left {
        width: 80px;
        margin-right: 10px;
        color: rgba(0, 0, 0, 0.6);
    }
    .device-line-right {
        flex: 1;
        color: rgba(0, 0, 0, 1.0);
        word-break: break-word;
       .device-line-tag{
           margin-right: 5px;
       }
    }
}
}
</style>
